<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
</head>
<body class="page">
    <!-- 头部区域 -->
    <a href="./mine-edit.html" class="header-container">
      <!-- 头像和用户名 -->
      <div class="header">
        <div class="header-box">
          <img id="userImg" class="header-img" src="../img/user-img.jpg" alt="头像">
          <span id="nickName" class="header-name">--</span>
        </div>
        <span class="iconfont icon-xiayiye mine-arrow"></span><!-- 向右箭头 -->
      </div>
  
      <!-- 个性签名 -->
      <p class="header-sign">个性签名：<span id="userSign">这个人很懒，什么都没有留下</span></p>
    </a>
    <!-- 文件上传的 input -->
    <input type="file" id="imgUploadIpt" class="dpnone">
  
    <!-- 个人动态 -->
    <div class="dynamic-container">
      <div>
        <span class="iconfont icondynamic mine-icon"></span>
        <span class="mine-card-title">个人动态</span>
      </div>
      <div>
        <span id="dynamicCount" class="dynamic-count">--</span>
        <span class="iconfont icon-xiayiye mine-arrow"></span>
      </div>
    </div>
  
    <!-- 运动数据 -->
    <div class="data-container" id="sportsData">
      <div class="data-header">
        <div>
          <span class="iconfont iconchart mine-icon"></span>
          <span class="mine-card-title">运动数据</span>
        </div>
        <span class="iconfont icon-xiayiye mine-arrow"></span>
      </div>
  
      <div class="dpflex">
        <div class="data-time">
          <p class="card-subtitle">总运动</p>
          <p><span id="timeCount" class="card-num">--</span><span class="fs12">分钟</span></p>
        </div>
        <div class="flex1 pl8">
          <p class="card-subtitle">本周消耗</p>
          <p><span id="kcalCount" class="card-num">--</span><span class="fs12">千卡</span></p>
        </div>
      </div>
    </div>
  
    <!-- 运动徽章 -->
    <div class="badge-container">
      <div class="badge-header" id="mybadge">
        <div>
          <span class="iconfont iconbadge mine-icon"></span>
          <span class="mine-card-title">运动徽章</span>
        </div>
        <span class="iconfont icon-xiayiye mine-arrow"></span>
      </div>
      <div class="badge-list" id="badgeList"></div>
    </div>
  
    <div id="logout">退出登录</div>
  </body>
</html>